<template>
  <Submenu :name="parentPath">
    <div slot="title">
      <Icon size="17" v-if="parentIcon" :type="parentIcon"/>
      <span style="margin-left: 6px;">{{ parentTitle }}</span>
    </div>
    <div v-for="(item, index) in children" :key="`${item.path}-${index}`">
      <div v-if="item.children && item.children.length >= 0">
      <!-- <div v-if="item.children && item.children.length >= 0 && item.children.length == 1"> -->
        <side-menu-item :parent-item="item"></side-menu-item>
      </div>
      <div v-else>
        <MenuItem :name="item.path">
          <Icon size="17" v-if="item.meta && item.meta.icon" :type="item.meta.icon"/>
          <span>{{ item.meta.title }}</span>
        </MenuItem>
      </div>
    </div>
  </Submenu>
</template>
<script>
import SideMenuItem from "./side-menu-item";
export default {
  name: "SideMenuItem",
  props: {
    parentItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    SideMenuItem,
    // Icon
  },
  computed: {
    parentIcon() {
      return this.parentItem.meta.icon;
    },
    parentTitle() {
      return this.parentItem.meta.title;
    },
    parentPath() {
      return this.parentItem.path;
    },
    children() {
      return this.parentItem.children;
    }
  },
  data() {
    return {
    };
  },
  methods: {},
  watch: {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.side-menu-wrapper {
  width: auto;
  height: 100%;
  background-color: var(--sider-bg);
  color: #fff;
  transition: .2s ease;
  .side-menu-list {
    height: ~"calc(100% - 32px)";
  }
  .collapsed {
    height: 32px;
    background: var(--sider-bg-collapsed);
    position: relative;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 13px;
      height: 12px;
      transition: .2s ease;
      transform-origin: center center;
    }
    &.collapsed-min::after {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }
}

/deep/ .ivu-menu-item-group-title {
  display: none;
}
</style>
